- breadcrumb_title _('Edit Password')
- page_title _('Password')
- @force_desktop_expanded_sidebar = true
- @hide_search_settings = true
- passkey_tracking_entry_point = 2

- if Feature.enabled?(:passkeys, @user)
  - if @user.passkeys_enabled?
    = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-my-5' }) do |c|
      = c.with_body do
        - two_factor_link = link_to('', profile_two_factor_auth_path)
        = safe_format(s_('ProfilesAuthentication|You currently use passkeys for secure and faster sign in. %{link_start}Manage passkeys%{link_end}.'), tag_pair(two_factor_link, :link_start, :link_end))
  - else
    = render Pajamas::AlertComponent.new(title: s_('ProfilesAuthentication|Sign in faster with passkeys'),
        alert_options: { class: 'gl-my-5' }) do |c|
      = c.with_body do
        - learn_more_link = link_to('', help_page_path('auth/passkeys.md'), target: '_blank', rel: 'noreferrer')
        = safe_format(s_('ProfilesAuthentication|Add a passkey to sign in securely with your trusted device. %{link_start}Learn more about passkeys%{link_end}.'), tag_pair(learn_more_link, :link_start, :link_end))
      = c.with_actions do
        = render Pajamas::ButtonComponent.new(href: new_profile_passkey_path(entry_point: passkey_tracking_entry_point), variant: :confirm, icon: 'passkey') do
          = s_('ProfilesAuthentication|Add passkey')

= render ::Layouts::SettingsSectionComponent.new(page_title) do |c|
  - c.with_description do
    - if @user.password_automatically_set
      = _('Change your password.')
    - else
      = _('Change your password or recover your current one.')
  - c.with_body do
    = gitlab_ui_form_for @user, url: user_settings_password_path, method: :put, html: {class: "update-password"} do |f|
      = form_errors(@user)

      - unless @user.password_automatically_set?
        .form-group
          = f.label :password, _('Current password'), class: 'label-bold'
          = f.password_field :password, required: true, autocomplete: 'current-password', class: 'form-control gl-form-input gl-max-w-80', data: { testid: 'current-password-field' }
          %p.form-text.gl-text-subtle
            = _('You must provide your current password in order to change it.')
      .form-group
        = f.label :new_password, _('New password'), class: 'label-bold'
        = f.password_field :new_password, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input js-password-complexity-validation gl-max-w-80', data: { testid: 'new-password-field' }
        = render_if_exists 'shared/password_requirements_list'
      .form-group
        = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
        = f.password_field :password_confirmation, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input gl-max-w-80', data: { testid: 'confirm-password-field' }
      .gl-my-3
        = f.submit _('Save password'), class: "gl-mr-3", data: { testid: 'save-password-button' }, pajamas_button: true
        - unless @user.password_automatically_set?
          = render Pajamas::ButtonComponent.new(href: reset_user_settings_password_path, variant: :link, method: :put) do
            = _('I forgot my password')
